<template>
  <div class="home">
    <div class="search-box">
      <div class="search">
        <input type="text" placeholder="搜索帖子">
        <i class="iconfont search-icon1">&#xe600;</i>
      </div>
      <i class="iconfont search-icon2">&#xe617;</i>
    </div>
    <div class="tab-box">
      <div class="tab-big">
        <div class="tab" v-for="item, index in TabList" :key="index">{{ item.classname }}</div>
      </div>
    </div>
    <div class="content-big">
      <div class="content-box" v-for="item, index in ContentList" :key="index">
        <div class="content-tab">
          <img :src="item.user.userpic" alt="">
          <div class="content">
            <p class="p1">{{ item.user.username }}</p>
            <p class="p2">{{ item.create_time }}</p>
          </div>
        </div>
        <p class="content-p">{{ item.content }}</p>
        <img :src="item.titlepic" alt="" class="content-img">
        <div class="content-bottom">
          <div class="bottom">
            <i class="iconfont">&#xe613;</i>
            <!-- <div class="bottom-content">支持</div> -->
            <div class="bottom-content">3</div>
          </div>
          <div class="bottom">
            <i class="iconfont">&#xe614;</i>
            <div class="bottom-content">反对</div>
            <!-- <div class="bottom-content">3</div> -->
          </div>
          <div class="bottom">
            <i class="iconfont">&#xe616;</i>
            <!-- <div class="bottom-content">评论</div> -->
            <div class="bottom-content">3</div>
          </div>
          <div class="bottom">
            <i class="iconfont">&#xe653;</i>
            <div class="bottom-content">分享</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      TabList: [],
      ContentList: []
    }
  },
  methods: {
    // 获取tab数据
    initTab() {
      this.$http.get('postclass').then((res) => {
        console.log(res)
        let status = res.status
        if (status === 200) {
          this.TabList = res.data.data.list
          console.log('tab', this.TabList)
        }
      })
    },
    // 获取文章内容
    initContent() {
      this.$http.get('postclass/1/post/1').then((res) => {
        console.log(res)
        let status = res.status
        if (status === 200) {
          this.ContentList = res.data.data.list
          console.log('tab', this.ContentList)
        }
      })
    }
  },
  created() {
    this.initTab()
    this.initContent()
  }
}
</script>
<style lang="scss" scoped>
$width: 100%;
$bg-color: red;

img {
  width: $width;
  height: 100%;
}

.search-box {
  width: $width;
  height: 44px;
  line-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;

  .search-icon2 {
    color: rgb(51, 51, 51);
  }

  .search {
    position: relative;
    display: flex;
    width: 341.3px;
    height: 30px;
    background-color: rgb(245, 244, 242);
    align-items: center;
    justify-content: center;

    input {
      text-align: center;
      border: 0;
      background-color: rgb(245, 244, 242);

      &::placeholder {
        font-size: 16px
      }
    }

    .search-icon1 {
      position: absolute;
      left: 0;
      margin-left: 115px;
      font-size: 18px;
    }
  }
}

.tab-box {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  width: $width;
  height: 54px;
  overflow-x: scroll;

  &::-webkit-scrollbar {
    display: none;

  }

  .tab-big {
    width: 108%;
    padding-left: 10px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .tab {
      width: 70px;
      height: 54px;
      line-height: 54px;
      font-size: 17px;
    }
  }
}
.content-big{
  bgc
}
.content-box {
  width: 355px;
  height: 320px;
  margin: auto;
  margin-bottom: 10px;

  .content-tab {
    height: 48px;
    background-color: #fff;
    margin: auto;
    display: flex;
    align-items: center;
    margin-bottom: 5px;

    img {
      width: 32px;
      height: 32px;
      border-radius: 50%;
    }

    .content {
      display: flex;
      flex-direction: column;
      margin-left: 15px;

      .p1 {
        font-size: 15px;
      }

      .p2 {
        font-size: 12px;
        color: #A9A5A0;
      }
    }
  }

  .content-p {
    font-size: 17px;
    margin-top: 5px;
    margin-bottom: 5px;
  }

  .content-img {
    width: $width;
    height: 175px;
  }

  .content-bottom {
    width: 355px;
    height: 30px;
    display: flex;
    background-color: #fff;
    margin-top: 15px;
    line-height: 30px;

    .bottom {
      width: 25%;
      display: flex;
      justify-content: center;

      i {
        font-size: 20px;
      }

      .bottom-content {
        font-size: 14px;
        margin-left: 5px;
      }
    }
  }
}</style>
